<template>
	<view class="container">
		<view class="container-head">
			<view class="container-top">
				<image src="@/static/avther.png" mode="aspectFill"></image>
				<view class="container-head-title">
					<view class="container-head-title-h">
						<image src="../../static/xiaos.png" mode="aspectFill"></image>
					</view>
					<view class="container-head-title-d">{{ salesInfo.group_name || '-' }}</view>
				</view>
			</view>
			
			<view class="container-right">
				<view class="container-right-title">
					<view>{{ salesInfo.device_total || 0 }}</view>
					<view>设备安装</view>
				</view>
				 <image src="../../static/jiqi.png" mode="aspectFill" class="container-right-img" ></image>
			</view>
		</view>
	<view class="box-card">
		<view class="container-tag">
		   我的设备
		</view>
		<view class="box-card-item" v-for="(item, index) of salesInfo.manager_info" :key="index">
			<view class="box-card-item-left">
				<view class="box-card-item-left-title">设备组编号: {{ item.device_id }} </view>
				<view class="box-card-item-left-text">
					{{ item.device_name }}
				</view>
				<view class="box-card-item-left-addr">
					<image src="@/static/ren.png" mode="aspectFill"></image>
					<view>
						{{ item.head_name }}
					</view>
				</view>
				<view class="box-card-item-left-addr">
					<image src="@/static/ji.png" mode="aspectFill"></image>
					<view>
						{{ item.phone }}
					</view>
				</view>
				<view class="box-card-item-left-addr">
					<image src="@/static/address-icon.png" mode="aspectFill"></image>
					<view>
						{{ item.address }}
					</view>
				</view>
			</view>
			<view class="box-card-item-right">
				<!-- <u-icon name="arrow-right" size="24"></u-icon> -->
			</view>
		</view>
	</view>
	</view>
</template>

<script>
  import request from "@/api/request.js"
  export default {
    data(){
	  return {
	    token: '',
		salesManager: '',
		salesInfo:{},
		userInfo: {}
	  }
	},
	onLoad({ salesManager }) {
	 this.token = uni.getStorageSync('token');
	 this.userInfo = JSON.parse(uni.getStorageSync('userInfo'))
	 this.salesManager = salesManager
	 this.getDataInfo()
	},
	methods: {
	  getDataInfo(){
		request({
		  url: '/kx/team/viewStoresInfo',
		  method: 'POST',
		  data: {
			  token: this.token,
			  sales_manager:  this.salesManager
		  },
		  successCb: (res) => {
			 this.salesInfo = res.data
		  }
		})  
	  }	
	}
  }
</script>

<style lang="scss" scoped>
	.comm-img {
	 width: 28rpx;
	 height: 22rpx;
	 object-fit: cover;	
	}
	.comm-text {
	  font-size: 24rpx;
	  color: #6D6D6D;
	  margin: 0 10rpx;  
	}
	.comm-count {
	  font-weight: 700;
	  font-size: 36rpx;
	  color: #3D3D3D;	
	}
.container{
  background: #F3F3F3;
  width: 100%;
  min-height: 98vh;
  padding-top: 2rpx;
  &-top {
	@include layout(stretch, center);  
  }
  &-right {
   display: flex;
   &-title {
	display: flex;
	align-items: center;
	justify-content:  center;
	flex-direction: column;
	view {
		margin-right: 12rpx;
	  &:nth-child(1){
		color: #3D3D3D; 
		font-size: 48rpx;
		font-weight: 700;
	  }
	  &:nth-child(2){
		color: #6D6D6D;
	    font-size: 20rpx;
	  }
	}
   }
   &-img {
	margin-left:0 !important;
	width: 102rpx !important;
	height: 84rpx !important;
	background-size: 100%;
	margin-right: 44rpx
   }
  }
  &-head {
	@include layout(space-between, center);
	height: 180rpx;
	background: #FFFFFF;
	margin: 0 auto;
	image {
      margin-left: 44rpx;
	  width: 106rpx;
	  height: 106rpx;
	  object-fit: cover;
	}
	&-title {
	 margin: 0 24rpx;
	 &-h {
	  width: 174rpx;
	  height: 46rpx;
	  image {
		margin-left: 0;
	    width: 100%;
		height: 100%;
		background-size: 100%;
	  }
	 }
	 &-d {
	  font-size: 20rpx;
	  color: #6D6D6D;
	  line-height: 1.5;
	 }
	}
  }
  &-tag {
	width: 100%;
    margin: 26rpx 0 0 82rpx;
	padding: 30rpx 0 20rpx 0;
	font-weight: 700;
	font-size: 28rpx;
	color: #3D3D3D;
	border-radius: 25rpx 25rpx 0 0;
  }
}
	.box-card {
		border-radius: 50rpx 50rpx;
		margin: 0 auto;
		margin-top: -50rpx;
		background: #F3F3F3;
		&-item {
		@include layout(stretch, center);
		 width: 650rpx;
		 background: $uni-bg-color;
		 margin: 12rpx auto;
		 border-radius: 20rpx;
		padding: 20rpx 30rpx;
		 &-left {
			 flex: 1;
			 &-title {
			   line-height: 2;
			   font-weight: 700;
			   font-size: 24rpx;
			   color: #3D3D3D;
			 }
			 &-text {
				font-size: 24rpx;
				color: #5A9EF7; 
			 }
			 &-addr {
			   @include layout(stretch, center);
			   image {
			    width: 24rpx;
			    height: 26rpx;
			    object-fit: cover;
				margin-right: 12rpx;
				flex-shrink: 0;
			   } 
			   view {
				font-size: 20rpx;
				line-height: 1.5;
				color: #6D6D6D;   
			   }
			 }
		 }
		 &-right {
		   margin-right: 24rpx;
		 }
		}
	}
</style>